<template>
  <div class="subItemBox">
    <div class="breadcrumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>运行管理</el-breadcrumb-item>
        <el-breadcrumb-item>工作质量反馈</el-breadcrumb-item>
        <el-breadcrumb-item><a style="color: #535862">{{ itemName }}</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="subItem">
      <div class="itemContent">
        <div class="title">所选人员信息</div>
        <div class="contentBody">
          <el-descriptions>
            <el-descriptions-item label="姓名：" label-class-name="myLabel">{{roterRow.staffName}}</el-descriptions-item>
            <el-descriptions-item label="工号：" label-class-name="myLabel">{{roterRow.staffNumber}}</el-descriptions-item>
<!--            <el-descriptions-item label="所属航站楼：" label-class-name="myLabel"></el-descriptions-item>-->
            <el-descriptions-item label="考勤记录：" label-class-name="myLabel">
                <el-button type="primary" @click="attendanceFn">查看</el-button>
            </el-descriptions-item>
            <el-descriptions-item label="在岗时长：" label-class-name="myLabel">{{onlineDuration}}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div class="itemContent">
        <div class="title" style="display: flex;align-items: center">
            <span>主要工作列表</span>
            <el-icon
                class="el-input__icon"
                color="#427CC9"
                v-if="roterType === '1'"
                @click="addList"
            >
                <CirclePlus/>
            </el-icon>
        </div>
        <div class="contentBody" v-loading="workListArray.length === 0" element-loading-text="加载中...">
          <el-card class="box-card" v-for="(listItem,index) in workListArray" :key="index">
              <el-icon
                  class="el-input__icon icon_float"
                  color="#da051f"
                  v-if="roterType === '1'"
                  @click="removeList(index)"
              >
                  <Remove />
              </el-icon>
            <el-form ref="form" :model="listItem" :hide-required-asterisk="roterType!=='1'" label-width="180px" style="padding-right: 80px">
              <el-form-item label="分类：" prop="quyu">
                  <span style="position: absolute;left: -65px;top: 0;color: #f56c84">*</span>
                <el-select v-model="listItem.quyu" :value-key="index" placeholder="请选择分类" style="width: 100%" :disabled="inputDisabled" @change="(data)=>{return selectChange(data,index)}">
                  <el-option v-for="(item,index) in workStandardsList" :key="index" :label="item.name" :value="item"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="关联条例 : " prop="gltl">
                  <span style="position: absolute;left: -86px;top: 0;color: #f56c84">*</span>
                <div class="tableBox">
                  <div style="padding:12px 8px;display: flex;align-items: center" v-if="roterType==='1'">
                      <el-input placeholder="请输入内容" v-model="listItem.seachGltl" class="input-with-select"/>
                      <el-button type="primary" @click="gltlSeachFn(index)" :disabled="seachBtnDisble">搜索</el-button>
                      <el-button type="primary" @click="gltlCziFn(index)" :disabled="seachBtnDisble">重置</el-button>
                  </div>
                  <el-table ref="accountRef" :data="listItem.tableData" @select="(list,row)=>{ return selectRow(list,row,index)}" stripe style="width: 100%;height: 300px;overflow:auto;border-radius: 10px">
                    <el-table-column type="selection" width="55" :selectable="((row,index)=> roterType==='2' || roterType==='4' || roterType==='3' ? false : true)">
                    </el-table-column>
                    <el-table-column type="index" prop="date" label="序号" width="180">
                    </el-table-column>
                    <el-table-column prop="ruleContent" label="操作规程">
                    </el-table-column>
                    <el-table-column prop="commendPenalizeLabel" label="奖惩措施" width="150" align="center">
                    </el-table-column>
                    <el-table-column prop="scoreLabel" label="分值" width="150" align="center">
                    </el-table-column>
                  </el-table>
                </div>
              </el-form-item>
              <el-form-item label="工作内容：">
                <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" v-model="listItem.gznr"
                          maxlength="200" :disabled="roterType === '2' || roterType === '3' || roterType === '4'" show-word-limit></el-input>
              </el-form-item>
              <el-form-item label="工作质量：" >
                <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" v-model="listItem.zhiliang"
                          maxlength="200" :disabled="roterType === '2' || roterType === '3' || roterType === '4'" show-word-limit></el-input>
              </el-form-item>
                <el-form-item label="绩效：">
                    <el-radio  v-model="listItem.jiangli" label="1" :disabled="roterType === '2' || roterType === '3' || roterType === '4'">绩效奖励</el-radio>
                    <el-radio  v-model="listItem.jiangli" label="2" :disabled="roterType === '2' || roterType === '3' || roterType === '4'">绩效扣罚</el-radio>
                    <el-input-number :disabled="!listItem.jiangli || roterType === '2' || roterType === '3' || roterType === '4'" v-model="listItem.koufa" controls-position="right" min="0" max="99999"></el-input-number>
                </el-form-item>
            </el-form>
          </el-card>
        </div>
      </div>
      <div class="itemContent" v-if="roterType === '1' || roterType === '2' || roterType === '4'">
        <div class="title">改进列表</div>
        <div class="contentBody">
          <el-form ref="form" :model="mainForm" label-width="180px">
            <el-form-item label="改进说明：">
              <el-input v-if="roterType==='1' || roterType==='2'" :disabled="roterType==='2'" type="textarea" v-model="mainForm.desc" :autosize="{ minRows: 4, maxRows: 6}" maxlength="200" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="评分项：">
              <el-radio  v-model="mainForm.radio" label="1" :disabled="roterType === '2' || roterType==='4'" @change="scoreNumChange">加分</el-radio>
              <el-radio  v-model="mainForm.radio" :disabled="roterType === '2' || roterType==='4'" label="2" @change="scoreNumChange">扣分</el-radio>
              <el-input-number  v-model="mainForm.num" controls-position="right" min="0" max="100" :disabled="!mainForm.radio || roterType === '2' || roterType==='4'" @change="scoreNumChange"></el-input-number>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="itemContent" v-if="roterType === '1' || roterType === '2' || roterType === '3' || roterType === '4'">
        <div class="title">当月累计得分</div>
        <div class="contentBody">
          <div class="contentBody">
            <el-form ref="form" :model="mainForm"  :hide-required-asterisk="roterType!=='1'" label-width="180px">
              <div style="display: flex;justify-content: space-between;width: 50%">
                <el-form-item label="累计得分：" prop="ljdf">
                    <el-input v-model="mainForm.ljdf" disabled></el-input>
                </el-form-item>
                <el-form-item label="绩效等级：" prop="jxdj">
                    <el-input v-model="mainForm.jxdj" disabled></el-input>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </div>
      </div>
      <div class="itemContent" v-if="(roterType === '2' && roterRow.status != '0') || (roterType === '3' && roterRow.status != '0') || (roterType === '4' && roterRow.status != '0')">
        <div class="title">个人自评</div>
        <div class="contentBody">
          <el-form ref="form" :model="mainForm" label-width="180px">
            <el-form-item label="个人自评：">
              <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" maxlength="200"
                        v-model="mainForm.assessment" :disabled="assessmentDis" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="自评总分：">
              <el-input-number v-model="mainForm.totalScore" controls-position="right" min="0" :disabled="assessmentDis"></el-input-number>
            </el-form-item>
          </el-form>
        </div>
      </div>
        <div class="itemContent" v-if="(roterType==='2' && roterRow.status != '0' && roterRow.status != '1') || (roterType === '4' && roterRow.status != '0' && roterRow.status != '1')">
            <div class="title">复核结果</div>
            <el-form ref="form" label-width="180px">
                <el-form-item label="复核结果：">
                    <span>{{mainForm.compositeResults}}</span>
                </el-form-item>
                <el-form-item label="驳回意见：">
                    <el-input type="textarea" v-model="mainForm.finalRejection" :disabled="finaDis" :autosize="{ minRows: 4, maxRows: 6}" maxlength="200" show-word-limit></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="itemContent" v-if="roterType==='2' && roterRow.status == '4'">
            <div class="title">签字确认</div>
            <div class="contentBody">
                <el-form ref="form" :model="mainForm" label-width="180px">
                    <el-form-item label="员工签字：">
                        <el-image
                            style="width: 100px; height: 100px"
                            :src="signatureUrl" fit="contain"></el-image>
                    </el-form-item>
                </el-form>
            </div>
        </div>
      <div class="footer">
        <el-button @click="backBtn">{{ quxiaoBtn }}</el-button>
        <el-button type="primary" @click="saveBtn" :loading="saveBtnLoading" v-if="roterType !='2'">{{ baocunBtn }}</el-button>
      </div>
    </div>
<!--     考勤记录弹窗 -->
      <edit-dialog
          class="maintenance"
          :centerDialogVisible="roupDialogVisible"
          :tilte="roupTitle"
          :key="timer"
          align-center
          :defaultButton="false"
          :width="'1200'"
          @cancel="handleCancel"
      >
          <template #content>
              <table-common
                  :columns="exampleHistoryColumns2"
                  :table-data="attendanceData"
                  size="small"
                  :pagination="false"
                  stripe
                  :height="'300'"
              >
              </table-common>
          </template>
          <template #custom>
        <span class="dialog-footer">
          <el-button @click="handleCancel">关闭</el-button>
        </span>
          </template>
      </edit-dialog>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import {ref, reactive, onBeforeMount, nextTick} from 'vue'
import {ElMessage, FormRules} from 'element-plus'
import editDialog from '@/components/editDialog/index.vue';

const router = useRouter()

const signatureUrl = ref('');

import { getWorkStandardsList, getRegulationsList, getRegulationsList2, editStatus, getOnlineDuration, getEmpClock } from "@/api/quality/performanc"
import {exampleColumns} from "@/views/quality/performanc/config/columns";
import TableCommon from "@/components/TableCommon/index.vue";
import {exampleHistoryColumns2} from "../config/columns";

const roupDialogVisible = ref(false); // 弹窗是否打开
const roupTitle = ref<string>(""); // 弹窗标题
const timer = ref(); // 弹窗时间戳


// 取消按钮
const handleCancel = () => {
    roupDialogVisible.value = false;
};
const attendanceData = ref([])
const attendanceFn = async ()=> {
    roupDialogVisible.value = true;
    roupTitle.value = '考勤记录'
    const pyData = {
        month:roterRow.value.attendanceMonth,
        // month:'2023-11',
        staffId:roterRow.value.staffId
        // staffId:'1128041742327611392'
    }
    const res = await getEmpClock(pyData)
    if (res.code === '1') {
        attendanceData.value = res.data
    }
}
/**
 * @Name: 变量区域
 * @Author: cdfy2
 * @Date: 2023/15/06  15:52:06
 */
// 表格数据
const itemName = ref('')

const mainForm = ref({
    num:0,
    ljdf:0,
    radio:'',
    jxdj:'',
    desc:'',
    assessment:'',
    totalScore:0,
    compositeResults:'',
    finalRejection:'',
})
const roterType = ref(null as any)
const roterRow = ref(null as any)

// 搜索关联条例
const ruleContentInput = ref<any>();
const gltlSeachFn = async (index)=> {
    if (workListArray.value[index].seachGltl) {
        ruleContentInput.value = workListArray.value[index].seachGltl;
        const res = await getRegulationsList2(standardsIdValue.value,ruleContentInput.value);
        if (res.code === "1") {
            workListArray.value[index].tableData = res.data;
            workListArray.value[index].tableData.forEach((item)=>{
                if (item.commendPenalize === 0) {
                    item.commendPenalizeLabel = '加分'
                } else if (item.commendPenalize === 1) {
                    item.commendPenalizeLabel = '扣分'
                } else {
                    item.commendPenalizeLabel = '-'
                }
                if (item.score === null) {
                    item.scoreLabel = '-'
                } else {
                    item.scoreLabel = item.score
                }
            })
        } else {
            return
        }
    } else {
        ElMessage.info("请输入需要搜索的内容")
    }
}

// 重置
const gltlCziFn = (index)=> {
    workListArray.value[index].seachGltl= "";
    selectChangeFn(index)
}

// 关联条例选择 单选
const accountRef = ref(null);
const selectRow = (list, row,index) => {
    if (list.length === 0) {
        workListArray.value[index].gltl = [];
        workListArray.value[index].sumfScores = 0;
        addLjdeFn();
        return
    }
    accountRef.value[index].clearSelection()
    workListArray.value[index].tableData.forEach((ele) => {
        if (ele.id === row.id) {
            accountRef.value[index].toggleRowSelection(ele, true)
            workListArray.value[index].gltl = [ele];
            if (workListArray.value[index].gltl[0].commendPenalize === 0) { // 加分
                workListArray.value[index].numberTotal = Number(workListArray.value[index].gltl[0].score)
            } else if (workListArray.value[index].gltl[0].commendPenalize === 1) { // 扣分
                workListArray.value[index].numberTotal = 0 - Number(workListArray.value[index].gltl[0].score)
            } else {
                workListArray.value[index].numberTotal = 0
            }
        }
    })
    workListArray.value[index].sumfScores = workListArray.value[index].numberTotal
    addLjdeFn();
}

// 评分项
const numberTotal2 = ref<number>(0);
const scoreNumChange = ()=> {
    if (mainForm.value.radio === "1") { // 加分
        numberTotal2.value = Number(mainForm.value.num);
    } else if (mainForm.value.radio === "2") { // 扣分
        numberTotal2.value =0 - Number(mainForm.value.num);
    }
    addLjdeFn();
}

// 分类选择变化
const standardsIdValue = ref<any>();
const seachBtnDisble = ref(true)
const selectChange = async (data:any,index:any)=> {
    workListArray.value[index].gltl = [];
    seachBtnDisble.value = false;
    standardsIdValue.value = data;
    selectChangeFn(index)
}
const selectChangeFn = async (index)=> {
    workListArray.value[index].quyu = standardsIdValue.value.name
    const res = await getRegulationsList(standardsIdValue.value.id);
    if (res.code === "1") {
        workListArray.value[index].tableData = res.data;
        workListArray.value[index].tableData.forEach((item)=>{
            if (item.commendPenalize === 0) {
                item.commendPenalizeLabel = '加分'
            } else if (item.commendPenalize === 1) {
                item.commendPenalizeLabel = '扣分'
            } else {
                item.commendPenalizeLabel = '-'
            }
            if (item.score === null) {
                item.scoreLabel = '-'
            } else {
                item.scoreLabel = item.score
            }
        })
    } else {
        return
    }
}

//  添加空白工作列表面板
const addList = ()=> {
    workListArray.value.push(
        {
            quyu: '',
            gltl: [],
            tableData:[],
            seachGltl:"",
            gznr: '',
            zhiliang: '',
            jiangli: '',
            koufa: '',
            numberTotal:0,
            sumfScores:0
        }
    )
}

// 删除面板
const removeList = (index:any)=> {
    if (workListArray.value.length === 1) {
        ElMessage.info("该面板不可删除")
    } else {
        workListArray.value.splice(index,1)
        addLjdeFn();
    }
}

// 计算累计得分
const addLjdeFn = ()=> {
    let a = 100;
    workListArray.value.forEach((item:any)=> {
        a += item.sumfScores;
    })
    mainForm.value.ljdf = a + numberTotal2.value;
    convertFn();
}

// 转换绩效等级
const convertFn = ()=> {
    if (mainForm.value.ljdf < 60) {
        mainForm.value.jxdj = '不合格'
    } else if (mainForm.value.ljdf >= 60 && mainForm.value.ljdf < 100) {
        mainForm.value.jxdj = '基本合格'
    } else if (mainForm.value.ljdf >= 100 && mainForm.value.ljdf < 102){
        mainForm.value.jxdj = '良好'
    } else if (mainForm.value.ljdf >= 102) {
        mainForm.value.jxdj = '优秀'
    }
}

// 保存
const saveBtn = ()=> {
    // 新增奖惩记录
    if (roterType.value === "1") {
        let b = false;
        workListArray.value.forEach((item:any)=> {
            if (!item.quyu) {
                b = false;
            } else if (item.gltl.length === 0) {
                b = false;
            } else {
                b = true
            }
        })
        if (b) {
            editStatusFn();
        } else {
            ElMessage.info("请完善主要工作列表")
        }
    } else if (roterType.value === "3") {
        selfFn();
    } else if (roterType.value === "4") {
        evaluateFn();
    }
}

const backBtn = (()=> {
    router.push({path: '/quality/performanc'})
    sessionStorage.setItem('sionCurrenNodeData',JSON.stringify(roterRow.value.organId))
})

// 评定
const evaluateFn = async ()=> {
    let qualityPerformance = {
        id:roterRow.value.id,
        status:3,
        selfContent:mainForm.value.assessment,
        selfScord:mainForm.value.totalScore,
    }
    const res = await editStatus(qualityPerformance);
    if (res.code === "1") {
        saveBtnLoading.value = false;
        ElMessage.success("评定成功")
        backBtn();
    } else {
        saveBtnLoading.value = false;
        ElMessage.error("评定失败")
    }
}

// 自评
const selfFn = async ()=> {
    let qualityPerformance = {
        id:roterRow.value.id,
        status:2,
        selfContent:mainForm.value.assessment,
        selfScord:mainForm.value.totalScore,
    }
    const res = await editStatus(qualityPerformance);
    if (res.code === "1") {
        saveBtnLoading.value = false;
        ElMessage.success("自评成功")
        backBtn()
    } else {
        saveBtnLoading.value = false;
        ElMessage.error("自评失败")
    }
}

// 新增奖惩记录
const saveBtnLoading = ref<any>(false);
const editStatusFn = async ()=> {
    saveBtnLoading.value = true;
    let qualityPerformance = {
        id:roterRow.value.id,
        status:roterRow.value.status,
        staffName:roterRow.value.staffName,
        staffNumber:roterRow.value.staffNumber,
        workingJson:JSON.stringify(workListArray.value),
        explain:mainForm.value.desc,
        addPointReplenish:0, // 加分
        deductPointReplenish:0,//扣分
        score:mainForm.value.ljdf,
        // award:mainForm.jxdj,
    }
    if (mainForm.value.radio === "1") { // 加分
        qualityPerformance.addPointReplenish = mainForm.value.num
    } else if (mainForm.value.radio === "2") { // 扣分
        qualityPerformance.deductPointReplenish = mainForm.value.num
    }
    const res = await editStatus(qualityPerformance);
    if (res.code === "1") {
        saveBtnLoading.value = false;
        ElMessage.success("新增成功")
        backBtn();
    } else {
        saveBtnLoading.value = false;
        ElMessage.error("新增失败")
    }
}

/**
 * @Name: 挂载dom后操作
 * @Author: cdfy2
 * @Date: 2023/15/06  15:55:00
 */
// 工作列表循环
const workListArray = ref<any>([]);
const inputDisabled = ref(false); // 分类选择框禁用状态
const workStandardsList = ref<any>([]); // 回显工作标准数据
const standList = ref<any>([]);
const finaDis = ref<boolean>(false);
const assessmentDis = ref<boolean>(false);
const workListArrayFn = ()=> {
    workListArray.value = [
        {
            quyu: '',
            gltl: [],
            gznr: '',
            tableData:[],
            seachGltl:"",
            zhiliang: '',
            jiangli: '',
            koufa: '',
            numberTotal:0,
            sumfScores:0,
        }
    ]
}
const workEcho = ()=> {
    // 工作列表不为空 回显
    workListArray.value = JSON.parse(roterRow.value.workingJson);
    mainForm.value.desc = roterRow.value.explain;
    if (roterRow.value.addPointReplenish != 0) {
        mainForm.value.radio = "1"
        mainForm.value.num = roterRow.value.addPointReplenish
    } else if (roterRow.value.deductPointReplenish != 0) {
        mainForm.value.radio = "2"
        mainForm.value.num = roterRow.value.deductPointReplenish
    }
    mainForm.value.ljdf = roterRow.value.score
    scoreNumChange()
    convertFn();
    nextTick(()=>{
        workListArray.value.forEach((item:any,index:any)=>{
            item.tableData.forEach(item1=>{
                if(item1.id==item.gltl[0].id){
                    accountRef.value[index].toggleRowSelection(item1, true)
                }
            })

        })
    })
}
// 获取在岗时长
const onlineDuration = ref(null);
const quxiaoBtn = ref("取消")
const baocunBtn = ref("保存")
onBeforeMount(async () => {
    // 获取当前路由实例参数
    roterType.value = JSON.parse(JSON.stringify(router.currentRoute.value.query.type)) // 页面类型
    roterRow.value = JSON.parse(router.currentRoute.value.query.row) // 数据回显
    const res = await getWorkStandardsList(roterRow.value.organId); // 获取工作标准数据
    if (res.code === "1") {
        standList.value = res.data
    } else {
        return
    }
    const res2 = await getOnlineDuration(roterRow.value.attendanceMonth,roterRow.value.staffId);
    if (res2.code === '1') {
        onlineDuration.value = res2.data;
    }
    // 面包屑
    switch (roterType.value) {
        case '1':
            itemName.value = '新增奖惩记录'
            workStandardsList.value = standList.value
            // 未新增过工作列表则展示工作标准 可选
            if (roterRow.value.workingJson === null || roterRow.value.workingJson === "") {
                workListArrayFn();
            } else {
                workEcho();
            }
            break
        case '2':
            itemName.value = '查看已完成绩效考核明细'
            quxiaoBtn.value = "返回"
            signatureUrl.value = roterRow.value.signature;
            finaDis.value = true;
            assessmentDis.value = true;
            workStandardsList.value = standList.value;
            inputDisabled.value = true; // 禁用
            mainForm.value.assessment  = roterRow.value.selfContent;
            mainForm.value.totalScore  = roterRow.value.selfScord;
            mainForm.value.compositeResults = roterRow.value.reviewStatus;
            if (mainForm.value.compositeResults == 0) {
                mainForm.value.compositeResults = '通过'
            } else if (mainForm.value.compositeResults == 1) {
                mainForm.value.compositeResults = '驳回'
            }
            mainForm.value.finalRejection = roterRow.value.reviewOpinion;
            if (roterRow.value.workingJson === null || roterRow.value.workingJson === "") {
                workListArrayFn();
            } else {
                workEcho()
            }
            break
        case '3':
            itemName.value = '自评绩效考核明细'
            inputDisabled.value = true; // 禁用选择框
            if (roterRow.value.workingJson === null || roterRow.value.workingJson === "") {
                workListArrayFn();
            } else {
                workEcho()
            }
            break
        case '4':
            itemName.value = '评定'
            inputDisabled.value = true; // 禁用
            assessmentDis.value = true;
            finaDis.value = true;
            baocunBtn.value = "评定";
            mainForm.value.assessment  = roterRow.value.selfContent;
            mainForm.value.totalScore  = roterRow.value.selfScord;
            mainForm.value.compositeResults = roterRow.value.reviewStatus;
            mainForm.value.finalRejection = roterRow.value.reviewOpinion;
            if (mainForm.value.compositeResults == 0) {
                mainForm.value.compositeResults = '通过'
            } else if (mainForm.value.compositeResults == 1) {
                mainForm.value.compositeResults = '驳回'
            }
            if (roterRow.value.workingJson === null || roterRow.value.workingJson === "") {
                workListArrayFn();
            } else {
                workEcho()
            }
            break
    }
})
</script>

<style scoped lang="less">
::v-deep .el-table__header-wrapper .el-checkbox {
    visibility: hidden;
}
.box-card {
    margin-bottom: 30px;
}
.subItemBox {
  display: flex;
  flex-direction: column;

  .breadcrumbs {
    background: #f5f7f9;

    :deep(.el-breadcrumb) {
      padding: 12px 24px;
      line-height: 22px;

      .el-breadcrumb__inner {
        color: #989DAA;
      }
    }
  }

  .subItem {
    flex: 1;
    margin: 12px 24px 12px 24px;
    padding: 24px 24px 24px 0px;
    background: #fff;
    border-radius: 8px;
    .itemContent {
      margin-bottom: 45px;
      .title {
        font-size: 16px;
        position: relative;
        padding-left: 5px;
        border-left: 2px solid #2e7cf1;
        font-family: "HarmonyOS_Sans_SC_Medium";
        color: #353a42;
        line-height: 24px;
        font-weight: bolder;
        margin-bottom: 24px;
      }

        .el-input__icon {
            font-size: 28px;
            margin-left: 10px;
            cursor: pointer;
        }

        .icon_float {
            float: right;
        }

      .contentBody {
        padding: 0 60px;

        .tableBox {
          width: 100%;
          border: 1px solid #c0c4cc;
          border-radius: 5px;
            .input-with-select {
                margin-right: 20px;
            }
        }
      }
    }
    .footer{
      margin-top: 24px;
      display: flex;
      justify-content: center;
    }
  }
}

</style>
<style>
.myLabel {
  width: 100px;
  text-align: right;
  margin-right: 0;
  display: inline-block;
}
</style>
